<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/echarts.simple.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.calendar.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/template-web.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/stepData.js" type="text/javascript" charset="utf-8"></script>

		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/mui.calendar.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			.pieBG {
				background-image: url(../images/step/1.jpg);
				background-repeat: no-repeat;
				background-position-x: center;
				background-size: 100% 100%;
				width: 70vw;
				height: calc(75vh / 1.7);
				margin-left: auto;
				margin-right: auto;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.pie {
				width: 1000%;
				height: 1000%;
				opacity: 0.3;
			}
			
			.accpetTask {
				background-image: url(../images/step/4.png);
				background-size: 100% 100%;
				padding: 10px 30px;
				background-color: rgba(0, 0, 0, 0);
				border: 0px;
			}
			
			.completeTask {
				background-image: url(../images/step/5.png);
				background-size: 100% 100%;
				padding: 10px 30px;
				background-color: rgba(0, 0, 0, 0);
				border: 0px;
			}
		</style>
	</head>

	<body>

		<div class="mui-content" id="pageContent">
			<br />
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="mui-slider" id="contentSlider">
						<div class="mui-slider-group">

							<!-- 签到-->
							<div class="mui-slider-item">
								<ul class="mui-table-view mui-grid-view">
									<li class="mui-table-view-cell  mui-col-sm-4 mui-col-xs-4 ">
										<span class="mui-icon mui-icon-contact">112</span>
									</li>

									<li class="mui-table-view-cell mui-col-sm-4 mui-col-xs-4">
										1次<br /> 连续签到
									</li>

									<li class="mui-table-view-cell mui-col-sm-4 mui-col-xs-4">
										27次<br /> 累计签到
									</li>

									<li class="mui-table-view-cell mui-col-sm-12 mui-col-xs-12">
										<div id="mcContent">

										</div>
									</li>
								</ul>
							</div>

							<!-- 饼图 -->
							<div class="mui-slider-item">
								<div id="pieDetail">
									<div class="pieBG">
										<div class="pie">
										</div>
									</div>
									<br />
									<div class="mui-row" style="text-align: center;padding-top: 0px;">
										<div class="mui-col-sm-12 mui-col-xs-12" style="font-size: 20px;font-weight: bold;">
											本周运动量超越了{{rank}}%的用户!
										</div>

									</div>
									<br />
									<div class="mui-row" style="text-align: center;padding-top: 0px;">
										<div class="mui-col-sm-6 mui-col-xs-6" style="font-size: 18px;font-weight: bold;">
											共走步数:150034
										</div>
										<div class="mui-col-sm-6 mui-col-xs-6" style="font-size: 18px;font-weight: bold;">
											行进距离:150KM
										</div>
									</div>

								</div>
								<div id="pieTxt" class="mui-hidden">
									<img src="../images/step/6.jpg" width="100%" height="100%" />
								</div>

							</div>

							<!-- 任务 -->
							<div class="mui-slider-item">
								<ul class="mui-table-view" id="taskList">
									{{each taskList}}
									<li class="mui-table-view-cell mui-media">
										<a href="#" taskid="{{$value.id}}" taskstate={{$value.state}}>
											<div class="mui-media-body">
												{{$value.name}}
												<p class="mui-ellipsis">{{$value.detail}}</p>
											</div>
											{{if $value.state == 0}}
											<button type="button" class="mui-btn accpetTask"></button> {{else if $value.state == 1}}
											<button type="button" class="mui-btn completeTask"></button> {{/if}}
										</a>
									</li>
									{{/each}}
								</ul>
							</div>

						</div>
						<!-- 填充大小,将 mui-slider-indicator往下移 -->
						<div style="width: 100%;height: 25px;"></div>

						<div class="mui-slider-indicator">
							<div class="mui-indicator mui-active"></div>
							<div class="mui-indicator"></div>
							<div class="mui-indicator"></div>
						</div>
					</div>

				</li>

				<li class="mui-table-view-divider" style="padding:0 15px 0 0;">
					<div class="mui-row">

						<div class="mui-col-sm-4 mui-col-xs-4" style="height: 100%; background: linear-gradient(to right, #FF6400 , #FF0000);color: #FFFFFF;border-radius:0px  25px 25px 0px;text-align: center;">
							奖品兑换
						</div>
						<div class="mui-col-sm-8 mui-col-xs-8" style="text-align: right;color: ##999;font-weight: 500;font-size: 12px;">
							我的积分：359
						</div>

					</div>
				</li>

				<!--
				<li class="mui-table-view-cell">
				</li>
				-->

			</ul>

			<div class="mui-slider">
				<div class="mui-slider-group mui-slider-loop" id="awardList">
					{{set len = $data.awardList.length }} {{each awardList data i}} {{if i%4 == 0}}
					<div class="mui-slider-item">
						<ul class="mui-table-view mui-grid-view" style="padding: 0 0;">
							{{/if}}

							<li class="mui-table-view-cell mui-media mui-col-sm-3 mui-col-xs-3">
								<a href="#" awardid="{{data.id}}">
									<img src="{{@data.imgSrc}}" class="mui-media-object" style="width: 100%; height: 100%;" />
								</a>
							</li>
							{{if (i+1)%4==0||i==len-1}}
						</ul>
					</div>
					{{/if}} {{/each}}

				</div>

				<!-- 填充大小,将 mui-slider-indicator往下移 -->
				<div style="width: 100%;height: 25px;"></div>

				<div class="mui-slider-indicator">
					{{each awardList}} {{if $index%4==0}}
					<div class="mui-indicator {{if $index==0}}mui-active{{/if}}"></div>
					{{/if}} {{/each}}
				</div>
			</div>
		</div>

		<script type="text/javascript">
			mui("#mcContent").MCalendar();
			mui.init({
				preloadPages: [{
						id: 'awardDetails.html',
						url: 'awardDetails.html'
					},
					{
						id: 'taskDetails.html',
						url: 'taskDetails.html'
					}
				]
			});

			var html = template('pageContent', {
				rank: cur,
				taskList: taskData,
				awardList: awardData
			});

			document.querySelector("#pageContent").innerHTML = html;
			var chart = null;
			window.addEventListener('show', function(event) { //加载到窗口后再显示饼图,防止echarts获取不到窗口大小
				if(!chart) {
					mui.later(function() {
						chart = echarts.init(document.querySelector(".pie"));
						chart.setOption(option);
					}, 20);
				}
				mui('#contentSlider').slider({}).gotoItem(1);
			});

			document.querySelector("#pieDetail").addEventListener("tap", function(e) {
				document.querySelector("#pieDetail").classList.toggle("mui-hidden");
				document.querySelector("#pieTxt").classList.toggle("mui-hidden");
			});

			document.querySelector("#pieTxt").addEventListener("tap", function(e) {
				document.querySelector("#pieDetail").classList.toggle("mui-hidden");
				document.querySelector("#pieTxt").classList.toggle("mui-hidden");
			});

			var detailPage = null;
			mui("#awardList").on('tap', 'a', function() {
				var id = this.getAttribute("awardid");
				if(!detailPage) detailPage = plus.webview.getWebviewById("awardDetails.html");
				mui.fire(detailPage, 'awardId', {
					id: id
				})
				mui.openWindow({
					id: 'awardDetails.html'
				})
			});

			var taskPage = null;
			mui("#taskList").on('tap', 'a', function() {
				var state = this.getAttribute("taskstate")
				if(parseInt(state) == 1) return;

				var id = this.getAttribute("taskid");

				if(!taskPage) taskPage = plus.webview.getWebviewById("taskDetails.html");
				mui.fire(taskPage, 'taskId', {
					id: id
				});
				mui.openWindow({
					id: 'taskDetails.html'
				});
			});
		</script>
	</body>

</html>